<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的优惠券</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="css/coupon.css">

    <script type="text/javascript" src="../../js/base.js"></script>

    <style>
        .aui-tab-item.aui-active {
            color:#000;
            border-bottom: 2px solid #f10b31;
        }
        @media screen and (max-width:321px){
            .rowHeight{
              padding-top:0 !important
            }
        }
        .aui-btn{
            height:1.2rem;
            line-height: 1.2rem;
        }
    </style>
</head>
<body>
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
    <!--<a class="aui-pull-left aui-btn goBack" >-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="aui-title">我的优惠券</div>-->
<!--</header>-->
<section id="app" v-cloak>

    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active" id="couponYes"  >可以使用</div>
        <div class="aui-tab-item" id="couponNo"   >不可使用</div>
    </div>
    <!--可使用优惠券-->
    <div id="demo1"   class=" aui-margin-t-10"  >
        <div class="aui-flex-col aui-flex-item-12 aui-padded-l-10  aui-padded-r-10 aui-bg-default  aui-margin-b-10" v-for="couponInfo,index in chooseCoupon">
            <div class="aui-flex-item-4"  style="position: relative">
                <img src="../../icon/3-3/couponBg1.png"  alt="" style="height:5.8rem">
                <div class="couponPrice"><span>￥</span>{{getPrice(couponInfo.coupon_mustmoney)}}</div>
                <div class="remark">满{{getPrice(couponInfo.coupon_money)}}元可用</div>
            </div>
            <div class="aui-flex-item-8 aui-padded-l-15"  style="background: #fff"  @click="goBuy(index)">
                <div class="aui-flex-row aui-padded-b-5 aui-padded-t-10 rowHeight">
                    <div class="aui-flex-item-12" >
                        <span class="aui-font-size-14"  style="background: #56ccf2;padding:0.2rem 0.3rem;border-radius: 0.1rem;color: #fff;margin-right:0.5rem">满减券</span>
                        <span class="aui-font-size-16"  style="font-weight: bold">{{couponInfo.coupon_name}}</span>
                    </div>
                    <div class="aui-padded-r-10 aui-padded-t-15 rowHeight">
                        <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">{{getDateType(couponInfo.start_time+"000")}}-{{getDateType(couponInfo.end_time+"000")}}</span>
                        <span v-if="couponInfo.is_used==0" class=" aui-btn  aui-btn-info aui-btn-outlined  aui-pull-right aui-font-size-12" style="border-radius: 0.8rem">立即使用 </span>
                        <span v-if="couponInfo.is_used==1" class=" aui-btn aui-btn-default aui-pull-right  aui-font-size-12" >暂不可用</span>
                    </div>
                </div>
                <div  class="aui-padded-r-10 dashed">
                    <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">指定商品可用</span>
                  <span class=" aui-pull-right">
                    <i class="aui-iconfont aui-icon-down" style="font-size: 0.5rem;display:block;margin-top:0.3rem"></i>
                   </span>
                </div>
            </div>
        </div>
        <div  v-if=" !chooseCoupon.length">
            <div style="position:absolute;top:50%;left:50%;margin-left:-3rem;margin-top:-5rem">
                <img src="../../icon/3-3/daiyan.png" alt="" style="width:6rem">
                <div style="margin-top:0.5rem">暂没可用优惠券</div>
            </div>
        </div>
    </div>
   <!--不可使用优惠券-->
    <div id="demo2"   class=" aui-margin-t-10 aui-hide" >
        <div class="aui-flex-col aui-flex-item-12 aui-padded-l-10  aui-padded-r-10 aui-bg-default  aui-margin-b-10"   v-for="couponInfo,index in chooseNoCoupon">
            <div class="aui-flex-item-4"  style="position: relative">
                <!--<img src="../../icon/3-3/couponBg1.png"  alt="" style="height:5.8rem">-->
                <img src="../../icon/3-3/couponBg2.png"  alt="" style="height:5.8rem">
                <div class="couponPrice"><span>￥</span>{{getPrice(couponInfo.coupon_mustmoney)}}</div>
                <div class="remark">满{{getPrice(couponInfo.coupon_money)}}元可用</div>
            </div>
            <div class="aui-flex-item-8 aui-padded-l-15"  style="background: #fff" >
                <div class="aui-flex-row aui-padded-b-5 aui-padded-t-10 rowHeight">
                    <div class="aui-flex-item-12" >
                        <span class="aui-font-size-14"  style="background: #ccc;padding:0.2rem 0.3rem;border-radius: 0.1rem;color:#fff;margin-right:0.5rem">满减券</span>
                        <span class="aui-font-size-16"  style="font-weight: bold">{{couponInfo.coupon_name}}</span>
                    </div>
                    <div class="aui-padded-r-10 aui-padded-t-15 rowHeight">
                        <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">{{getDateType(couponInfo.start_time+"000")}}-{{getDateType(couponInfo.end_time+"000")}}</span>
                        <span class=" aui-btn aui-btn-default aui-pull-right  aui-font-size-12"  style="border-radius: 0.8rem;color:#fff">暂不可用</span>
                    </div>
                </div>
                <div  class="aui-padded-r-10 dashed">
                    <span class="aui-font-size-12" style="height:1.5rem;line-height:1.5rem">指定商品可用</span>
                  <span class=" aui-pull-right">
                    <i class="aui-iconfont aui-icon-down" style="font-size: 0.5rem;display:block;margin-top:0.3rem"></i>
                   </span>
                </div>
            </div>
        </div>
        <div  v-if="!chooseNoCoupon.length">
            <div style="position:absolute;top:50%;left:50%;margin-left:-3rem;margin-top:-5rem">
                <img src="../../icon/3-3/daiyan.png" alt="" style="width:6rem">
                <div style="margin-top:0.5rem">暂没可用优惠券</div>
            </div>
        </div>
    </div>


</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/aui-tab.js"></script>
<script type="text/javascript" src="./js/my_coupon.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>

</body>
</html>